<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">人工分单</template>
    <div>
        <el-col>
          <span class="detail">{{checkInfo.message}}</span>
        </el-col>
    </div>
    <el-form :model="form" ref="seperateForm">
      <el-form-item label="">
        <el-col>
            <div class="mid">
                <el-form-item label="分单给：">
                    <el-select v-model="form.work" placeholder="" @change="doAction({type:'get',action:'getGrid1'})">
                        <el-option :label="'早班'" :value="1"></el-option>
                        <el-option :label="'中班'" :value="2"></el-option>
                        <el-option :label="'晚班'" :value="3"></el-option>
                    </el-select>
                    <el-select v-model="form.withdrawType" placeholder="" @change="doAction({type:'get',action:'getGrid1'})">
                        <!-- <el-option :label="'全部'" :value="-1"></el-option> -->
                        <el-option :label="'人工出款'" :value="0"></el-option>
                        <el-option :label="'三方手动出款'" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            </el-col>
                <el-col :span="12">
                    <div class="circle flow">
                        <el-form-item label="" prop="accountId">
                            <el-radio-group v-model="form.accountId" label=''>
                                <el-radio :label="item.id" :value='item.id' class="circle" v-for="(item) in userList" :key="item.id">
                                    <span class="online-tag online" v-if="item.online==true">在线</span>
                                    <span class="online-tag offline" v-else>离线</span>
                                    {{item.userName + ' 已经分配了 '+ item.withdrawCount +' 笔提现单'}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-col>
            <el-col>
          <div class="labs">
            <el-button type="primary" @click="sperateOrder" :loading="loading" :disabled="isDisabled">确定
            </el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-col>
      </el-form-item>
    </el-form>
    <!-- <div style="font-size:12px">
      注：派单给的显示账户的是当前在线的账户
    </div> -->
  </el-dialog>
</template>

<script>

  import {form} from '@/build'
  import {batchSeperateCheck,batchSeperateSave,batchSeperateSelect} from '@/services/api/withdraw';
  export default {
    name: "batch-seperate-dialog",
    mixins: [form],
    props: ['value','rowData'],
    data() {
      return {
        checkInfo: {
          message:''
        },
        isDisabled:'',
        form:{
            withdrawType:0,
            work:1,
            accountId:""
        },
        userList:[]
      }
    },
    mounted() {
      this.bindSave(batchSeperateSave, 'saveForm', 'seperateForm', {
          beforeSend:()=>{
          return {orderIds : this.rowData.idsArr.join(','),accountId:this.form.accountId,withdrawType: this.form.withdrawType}
        },
        afterSuccess:(data)=>{
          if(data.length>0){
             this.$alert(data[1], '分单结果', {
              confirmButtonText: '确定',
            });
          }
          this.$emit('input', false);
          this.$parent.gridSearch();
        }
      });

      this.bindGet(batchSeperateCheck, 'checkInfo', {
        action: 'getGrid',
        beforeSend:()=>{
          return {orderIds : this.rowData.idsArr.join(','),accountId:this.rowData.usernameList.join(',')}
        },
        format:(data)=>{
          this.isDisabled = data.onSubmit==true?false:true
          return {
             message:data.message
          }
        }
      });
        this.doGet({action:'getGrid'})

      this.bindGet(batchSeperateSelect, 'userList', {
        action: 'getGrid1',
        sendingData: 'form',
        format: data => {
          this.loading = false;
          let result ;
          if(data.length>0){
            result = data
            this.form.accountId = data[0].id;
          }
          return result;
        }
      });
        this.doGet({action:'getGrid1'})
    },
    methods: {
      sperateOrder(){
        if(this.form.accountId==undefined || this.form.accountId=='' ||  this.form.accountId==null){
          this.$message({message: '请选择分单账户', type: "warning"})
          return false;
        }
        this.doSave({action: 'saveForm', form: 'seperateForm'})
      },
      cancel() {
        this.$emit('input', false);
      },
    },

  }
</script>

<style lang="scss" scoped>
  .detail{
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
  }
  .labs{
    margin-top: 30px;
    margin-left: 10%;
  }
  .mid{
    margin-top: 30px;
  }

  .circle{
      margin-top: 20px;
      margin-left: 20px;
  }

  .online-tag {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-indent: -9999px;
    text-align: center;
    overflow: hidden;
    vertical-align: middle;
    position: relative;

    &.offline {
      background: #f5f5f5;
      border: 1px solid #ccc;
    }

    &.online {
      background: #5ce45c;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -2px 0 0 -2px;
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #f1fff2;
        transform-origin: center;
        animation: scaleX 1.2s ease-in-out infinite;

      }
    }
  }

  .flow{
    max-height: 300px;
    overflow-y: auto;
  }
</style>
